---
title: Field


---

Support

<div style={{
    display: "grid",
    gridTemplateColumns: "repeat(2, 1fr)",
    gap: "0.5rem",
  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>

#### Preview

The created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).

Supported fields:

| Field Type | Description |
|------------|-------------|
| signHere | Signature field |
| signHereOptional | Optional signature field |
| signInitialHere | Initials field |
| signInitialHereOptional | Optional initials field |
| company | Company name field |
| dateSigned | Date signed field |
| title | Title field |
| fullName | Full name field |
| lastName | Last name field |
| firstName | First name field |
| emailAddress | Email address field |
| number | Number field |
| date | Date field |
| ssn | Social Security Number field |
| zip5 | ZIP code field |
| zip5dash4 | ZIP code with 4-digit extension field |
| note | Note field |
| list | List field |
| checkbox | Checkbox field |
| radio | Radio button field |
| approve | Approve button field |
| decline | Decline button field |
| view | View button field |
| signerAttachment | Signer attachment field |
| signerAttachmentOptional | Optional signer attachment field |

<Frame background="subtle"><img src="../../images/previews/field-81a661f2/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>

<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
<CodeBlock title="template.tsx">
```jsx
import { Field } from "@fileforge/react-print";

<>
  <Tailwind>
    <h2 className="text-xl font-bold mb-4">Signature</h2>
    <div className="p-4 rounded-md border border-gray-200">
      By
      <br />
      <Field
        type="fullName"
        signee="sender"
        defaultValue="John Doe"
        className="border-b border-b-gray-300"
      />
      <br />
      <Field
        type="dateSigned"
        signee="sender"
        defaultValue="04/18/2024"
        className="border-b border-b-gray-300"
      />
      <br />
      <Field
        type="signHere"
        signee="sender"
        className="border border-gray-300 h-48"
      />
    </div>
  </Tailwind>
</>;

```
</CodeBlock>
<CodeBlock title="styles.css">
```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

html,
body {
  font-size: 28px;
  font-family: "Inter", sans-serif;
}

@page {
  size: A4;
}

```
</CodeBlock>
</CodeBlocks></div>

### Examples

